<template>
	<view class="user-info-page">
		<!-- 加载状态 -->
		<view class="loading-container" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>
		
		<view v-else>
			<!-- 基本信息部分 -->
			<view class="section">
				<view class="section-title">基本信息</view>
				
				<!-- 头像 -->
				<view class="info-item" @tap="changeAvatar">
					<text class="info-label">头像</text>
					<view class="avatar-container">
						<image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 姓名 -->
				<view class="info-item" @tap="editField('name')">
					<text class="info-label">姓名</text>
					<view class="info-value-container">
						<text class="info-value">{{ userInfo.name || '未填写' }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 昵称 -->
				<view class="info-item" @tap="editField('nickname')">
					<text class="info-label">昵称</text>
					<view class="info-value-container">
						<text class="info-value">{{ userInfo.nickname || '未填写' }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 性别 -->
				<view class="info-item" @tap="editGender">
					<text class="info-label">性别</text>
					<view class="info-value-container">
						<text class="info-value">{{ genderText }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 生日 -->
				<view class="info-item" @tap="editField('birthday')">
					<text class="info-label">生日</text>
					<view class="info-value-container">
						<text class="info-value">{{ userInfo.birthday || '未填写' }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<!-- 联系信息部分 -->
			<view class="section">
				<view class="section-title">联系信息</view>
				
				<!-- 手机号 -->
				<view class="info-item">
					<text class="info-label">手机号</text>
					<text class="info-value">{{ userInfo.phone || '未填写' }}</text>
				</view>

				<!-- 邮箱 -->
				<view class="info-item" @tap="editField('email')">
					<text class="info-label">邮箱</text>
					<view class="info-value-container">
						<text class="info-value">{{ userInfo.email || '未填写' }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 紧急联系人 -->
				<view class="info-item" @tap="editField('contact')">
					<text class="info-label">紧急联系人</text>
					<view class="info-value-container">
						<text class="info-value">{{ userInfo.contact || '未填写' }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 紧急联系电话 -->
				<view class="info-item" @tap="editField('contact_phone')">
					<text class="info-label">紧急联系电话</text>
					<view class="info-value-container">
						<text class="info-value">{{ userInfo.contact_phone || '未填写' }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<!-- 工作信息部分 -->
			<view class="section">
				<view class="section-title">工作信息</view>
				
				<!-- 部门 -->
				<view class="info-item" @tap="editField('part')">
					<text class="info-label">部门</text>
					<view class="info-value-container">
						<text class="info-value">{{ userInfo.part || '未填写' }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 职位 -->
				<view class="info-item" @tap="editField('position')">
					<text class="info-label">职位</text>
					<view class="info-value-container">
						<text class="info-value">{{ userInfo.position || '未填写' }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 入职时间 -->
				<view class="info-item">
					<text class="info-label">创建时间</text>
					<text class="info-value">{{ formatDateTime(userInfo.create_time) }}</text>
				</view>

				<!-- 最后更新 -->
				<view class="info-item">
					<text class="info-label">最后更新</text>
					<text class="info-value">{{ formatDateTime(userInfo.update_time) }}</text>
				</view>
			</view>

			<!-- 其他信息部分 -->
			<view class="section">
				<view class="section-title">其他信息</view>
				
				<!-- 身份证号 -->
				<view class="info-item" @tap="editField('id_num')">
					<text class="info-label">身份证号</text>
					<view class="info-value-container">
						<text class="info-value">{{ maskIdCard(userInfo.id_num) || '未填写' }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 个人描述 -->
				<view class="info-item" @tap="editField('desc')">
					<text class="info-label">个人描述</text>
					<view class="info-value-container">
						<text class="info-value text-multiline">{{ userInfo.desc || '未填写' }}</text>
						<image src="/static/my/Vector1@2x.png" style="width: 26rpx; height: 26rpx;" class="arrow" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 编辑弹窗 -->
		<view class="edit-modal" v-if="showEditModal" @tap="closeEditModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">编辑{{ editFieldLabel }}</text>
					<view class="close-btn" @tap="closeEditModal">
						<text class="close-icon">×</text>
					</view>
				</view>
				
				<view class="modal-body">
					<textarea v-if="editField === 'desc'" 
						class="edit-textarea" 
						v-model="editValue" 
						:placeholder="`请输入${editFieldLabel}`"
						maxlength="200" />
					<input v-else 
						class="edit-input" 
						v-model="editValue" 
						:placeholder="`请输入${editFieldLabel}`" />
				</view>
				
				<view class="modal-footer">
					<button class="modal-btn cancel" @tap="closeEditModal">取消</button>
					<button class="modal-btn confirm" @tap="saveEdit">保存</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { apiGetUserList } from '@/request/api.js'

export default {
	data() {
		return {
			loading: true,
			userInfo: {},
			// 编辑相关
			showEditModal: false,
			editField: '',
			editFieldLabel: '',
			editValue: '',
			// 当前用户ID
			currentUserId: 1
		}
	},
	computed: {
		// 性别文本显示
		genderText() {
			if (this.userInfo.sex === 1) return '男';
			if (this.userInfo.sex === 2) return '女';
			return '未填写';
		}
	},
	onLoad(options) {
		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: '用户信息'
		});
		
		// 从路径参数获取用户ID
		if (options.userId) {
			this.currentUserId = options.userId;
		}
		
		// 加载用户数据
		this.loadUserInfo();
	},
	methods: {
		// 加载用户信息
		async loadUserInfo() {
			this.loading = true;
			
			try {
				const data = {
					uid: this.currentUserId
				};
				
				const response = await apiGetUserList(data);
				
				if (response.code === 0 && response.data && response.data.info) {
					const userInfo = response.data.info;
					this.userInfo = {
						...userInfo,
						avatar: userInfo.photo || '/static/my/touxiang.png'
					};
				} else {
					uni.showToast({
						title: response.msg || '获取用户信息失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载用户信息失败:', error);
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 格式化日期时间
		formatDateTime(timeStr) {
			if (!timeStr || timeStr === '1970.01.01' || timeStr === null) return '暂无';
			
			try {
				const date = new Date(timeStr);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			} catch (e) {
				return timeStr;
			}
		},
		
		// 身份证号脱敏
		maskIdCard(idCard) {
			if (!idCard) return '';
			if (idCard.length < 8) return idCard;
			return idCard.substring(0, 4) + '****' + idCard.substring(idCard.length - 4);
		},
		
		// 编辑字段
		editField(fieldName) {
			const fieldLabels = {
				'name': '姓名',
				'nickname': '昵称',
				'birthday': '生日',
				'email': '邮箱',
				'contact': '紧急联系人',
				'contact_phone': '紧急联系电话',
				'part': '部门',
				'position': '职位',
				'id_num': '身份证号',
				'desc': '个人描述'
			};
			
			this.editField = fieldName;
			this.editFieldLabel = fieldLabels[fieldName] || fieldName;
			this.editValue = this.userInfo[fieldName] || '';
			this.showEditModal = true;
		},
		
		// 编辑性别
		editGender() {
			uni.showActionSheet({
				itemList: ['男', '女'],
				success: (res) => {
					this.userInfo.sex = res.tapIndex + 1;
					this.saveUserInfo();
				}
			});
		},
		
		// 关闭编辑弹窗
		closeEditModal() {
			this.showEditModal = false;
			this.editField = '';
			this.editFieldLabel = '';
			this.editValue = '';
		},
		
		// 保存编辑
		saveEdit() {
			if (!this.editValue.trim() && this.editField !== 'desc') {
				uni.showToast({
					title: '请输入内容',
					icon: 'none'
				});
				return;
			}
			
			// 更新本地数据
			this.userInfo[this.editField] = this.editValue;
			
			// 保存到服务器
			this.saveUserInfo();
			
			// 关闭弹窗
			this.closeEditModal();
		},
		
		// 保存用户信息到服务器
		async saveUserInfo() {
			try {
				// 这里应该调用更新用户信息的API
				// 暂时只显示成功提示
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				});
			} catch (error) {
				console.error('保存失败:', error);
				uni.showToast({
					title: '保存失败，请重试',
					icon: 'none'
				});
			}
		},
		
		// 更换头像
		changeAvatar() {
			uni.showActionSheet({
				itemList: ['从相册选择', '拍照'],
				success: (res) => {
					const sourceType = res.tapIndex === 0 ? ['album'] : ['camera'];
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: sourceType,
						success: (res) => {
							// 这里应该上传图片到服务器
							this.userInfo.avatar = res.tempFilePaths[0];
							uni.showToast({
								title: '头像更新成功',
								icon: 'success'
							});
						}
					});
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.user-info-page {
	min-height: 100vh;
	background: #F8F8F8;
	padding: 20rpx;
}

/* 加载状态 */
.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100rpx 0;
}

.loading-text {
	font-size: 28rpx;
	color: #999999;
}

/* 分组样式 */
.section {
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 28rpx;
	color: #666666;
	margin-bottom: 16rpx;
	padding: 0 16rpx;
}

.info-item {
	background: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 30rpx;
	margin-bottom: 2rpx;
	min-height: 88rpx;
}

.info-item:first-child {
	border-radius: 16rpx 16rpx 0 0;
}

.info-item:last-child {
	border-radius: 0 0 16rpx 16rpx;
	margin-bottom: 0;
}

.info-item:only-child {
	border-radius: 16rpx;
}

.info-label {
	font-size: 30rpx;
	color: #333333;
	font-weight: 500;
	flex-shrink: 0;
}

.info-value {
	font-size: 30rpx;
	color: #666666;
	text-align: right;
	flex: 1;
	margin-left: 20rpx;
}

.info-value-container {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-end;
}

.text-multiline {
	white-space: pre-wrap;
	word-break: break-all;
	max-width: 400rpx;
	text-align: right;
}

.avatar-container {
	display: flex;
	align-items: center;
}

.user-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	background-color: #F0F0F0;
}

.arrow {
	font-size: 32rpx;
	color: #CCCCCC;
	font-weight: 300;
	margin-left: 16rpx;
}

/* 编辑弹窗样式 */
.edit-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-content {
	background: #FFFFFF;
	border-radius: 16rpx;
	width: 90%;
	max-width: 600rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx 40rpx 20rpx;
	border-bottom: 1rpx solid #E0E0E0;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.close-icon {
	font-size: 48rpx;
	color: #999999;
}

.modal-body {
	padding: 40rpx;
}

.edit-input,
.edit-textarea {
	width: 100%;
	border: 1rpx solid #E0E0E0;
	border-radius: 12rpx;
	padding: 24rpx;
	font-size: 30rpx;
	color: #333333;
	background: #FFFFFF;
	box-sizing: border-box;
}

.edit-textarea {
	min-height: 200rpx;
	resize: none;
}

.modal-footer {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 40rpx 40rpx;
	border-top: 1rpx solid #E0E0E0;
}

.modal-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 12rpx;
	font-size: 32rpx;
	border: none;
	font-weight: 500;
}

.modal-btn.cancel {
	background: #F5F5F5;
	color: #666666;
}

.modal-btn.confirm {
	background: #FF4856;
	color: #FFFFFF;
}

.modal-btn.cancel:active {
	background: #E0E0E0;
}

.modal-btn.confirm:active {
	background: #E63946;
}
</style> 